<template>
  <div>
    <nav-top Licon="back"
             title="激活序列号"
             @callback="goBack" />

    <div class="serial-active gl-content">
      <div class="blue">
        <div class="item flex"
             v-for="(item, i) in text"
             :key="i">
          <div class="label">{{ item.label }}</div>
          <div class="value wsnw">{{ item.value }}</div>
        </div>
      </div>
      <div class="white">
        <input class="gl-input user w100 bsb"
               placeholder="请输入需激活用户账号或手机号"
               v-model="userInfo" />
        <div class="btn mlr-auto tac"
             @click="confirm">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'SerialActive',
  data() {
    return {
      text: [
        // { label: "序列号：", value: "1095700" },
        // { label: "所属批次：", value: "辛集市建华中学" },
        // { label: "会员内容：", value: "中小学状元3年卡" },
        // { label: "价格：", value: "¥468.00" }
      ],
      serial: '', // 序列号
      userInfo: ''
    }
  },
  created() {
    this.text = [
      { label: '序列号：', value: this.$route.params.serial },
      { label: '所属批次：', value: this.serialDetail.school_name },
      { label: '会员内容：', value: this.serialDetail.pname },
      {
        label: '价格：',
        value: '¥' + this.serialDetail.present_price.toFixed(2)
      }
    ]
  },
  computed: {
    ...mapGetters(['serialDetail'])
  },
  methods: {
    // 返回
    goBack(val) {
      if (val == 'back') {
        this.$router.go(-1)
      }
    },
    // 提交
    confirm() {
      let times
      clearTimeout(times)
      if (this.userInfo) {
        this.Http.editCard({
          id: this.$route.params.id,
          status: 2,
          name: this.userInfo
        })
          .then(res => {
            // console.log(res);
            this.$toast({
              message: '激活成功',
              duration: 500
            })
            times = setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          })
          .catch(err => {
            // console.log(err);
            this.$toast({
              message: err.msg,
              duration: 1500
            })
          })
      } else {
        this.$toast({
          message: '请输入用户账号或手机号',
          duration: 1500
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.serial-active {
  background-color: #fff;
  min-height: calc(100vh - 175px);
}

.blue {
  padding: 34px 36px 80px;
  background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
  box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
  border-radius: 20px;
  color: #fff;
  font-size: 32px;
  line-height: 2;
  .label {
    width: 180px;
  }
  .value {
    font-size: 36px;
    font-weight: bold;
  }
}

.white {
  margin-top: -40px;
  padding: 40px 35px;
  background: #fff;
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  .gl-input {
    padding: 30px 40px;
    background-color: #f0f2f5;
    border-radius: 48px;
    font-size: 32px;
  }
  .btn {
    margin-top: 34px;
    width: 290px;
    height: 90px;
    line-height: 90px;
    color: #fff;
    background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
    box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
    border-radius: 45px;
    font-size: 32px;
  }
}
</style>
